import React from 'react';
import router from 'umi/router';
//import Link from 'umi/link'

import { connect } from 'dva';

import { Card, Divider, Button,Modal, Table } from 'antd';

import DescriptionList from '@/components/DescriptionList';
const { Description } = DescriptionList;

const formPath = '/HR/HrPayslipForm';
const listPath = '/HR/HrPayslips';


@connect(({ hrPayslip }) => ({ hrPayslip }))
class Profile extends React.Component {
  state = {
    visibleDel: false,
  }


  treeview = [

      {
        title: '显示在工资条上',
        dataIndex: 'appears_on_payslip',
        sorter: (a, b) => ( a.appears_on_payslip ? 1 : 0 ) - ( b.bappears_on_payslip ? 1 : 0 ),
        render: (text, record) => text ? 'yes' : 'no',
      },


      {
        title: '排序',
        dataIndex: 'sequence',
        sorter: (a, b) => a.sequence - b.sequence,
      },


      { title: '名称', dataIndex: 'name', },
      { title: '金额', dataIndex: 'total', },
  ]


  id = 0

  async componentDidMount() {
    const { location: {query: { id } } } = this.props;
    this.id = Number(id)
    if (this.id) {
      const { dispatch } = this.props;
      dispatch({
        type: 'hrPayslip/view',
        payload:  { id: this.id }
      });
    }
  }

  compute(){
    if (this.id) {
      const { dispatch } = this.props;
      dispatch({
        type: 'hrPayslip/compute',
        payload:  { id: this.id }
      });
    }
  }

  post(){
    if (this.id) {
      const { dispatch } = this.props;
      dispatch({
        type: 'hrPayslip/post',
        payload:  { id: this.id }
      });
    }
  }

  unpost(){
    if (this.id) {
      const { dispatch } = this.props;
      dispatch({
        type: 'hrPayslip/unpost',
        payload:  { id: this.id }
      });
    }
  }


  gotoForm() {
    if(this.id){
      router.push(`${formPath}?id=${this.id}`);
    }
  }


  showDelete() {
    this.setState({
      visibleDel: true
    })

  }

  handleCancel(){
    this.setState({
      visibleDel: false,
    })
  }

  async HandleDelete(){
    if (this.id) {
      const { dispatch } = this.props;
      await dispatch({
        type: 'hrPayslip/unlink',
        payload:  { id: this.id }
      });

      const { hrEmployee } = this.props;
      if( hrEmployee.id ){
      }
      else{
        router.push(listPath);

      }
    }
  }

  render() {
    const { hrPayslip: { record } } = this.props;

    //console.log(record)

    const {  visibleDel } = this.state

    return (
      <Card bordered={false}>

        <DescriptionList size="large" title='操作控制' style={{ marginBottom: 32 }}>
          <Description >
            <Button onClick={()=>this.gotoForm()}>编辑</Button>
          </Description>
          <Description >
            <Button onClick={()=>this.showDelete()}>删除</Button>
          </Description>

          <Description >
            <Button onClick={()=>this.compute()}>计算</Button>
          </Description>

          <Description >
            <Button onClick={()=>this.post()}>确认</Button>
          </Description>

          <Description >
            <Button onClick={()=>this.unpost()}>反确认</Button>
          </Description>


        </DescriptionList>

        <Modal title='删除'
          visible={visibleDel}
          onOk={()=>this.HandleDelete()}
          onCancel={()=>this.handleCancel()}
        >
          确认删除?

        </Modal>


        <DescriptionList size="large" title='基本信息' style={{ marginBottom: 32 }}>
          <Description term='员工' >{record.employee_id && record.employee_id.name}</Description>
          <Description term='名称' >{record.name}</Description>
          <Description term='工资结构' >{record.struct_id && record.struct_id.name}</Description>
          <Description term='日期起' >{record.date_from}</Description>
          <Description term='日期止' >{record.date_to}</Description>
          <Description term='状态' >{record.state}</Description>



        </DescriptionList>
        <Divider style={{ marginBottom: 32 }} />
        <Table columns={this.treeview} dataSource={record.line_ids} rowKey="id" />
      </Card>
    );
  }
}

export default Profile;

